<template>
    <div>
        <h2 class="form-group-label">
            组件外边距
        </h2>
        <van-field label="是否居中">
            <template #input>
                <van-switch size="24" v-model="center" />
            </template>
        </van-field>
        <van-field>
            <template #input>
                <label style="margin-right: 8px">上边距</label>
                <van-stepper  style="margin-right: 16px" v-model="marginTop" integer min="-300" max="300" />
                <label style="margin-right: 8px">下边距</label>
                <van-stepper v-model="marginBottom" integer min="-300" max="300" />
            </template>
        </van-field>
        <van-field v-if="center == false">
            <template #input>
                <label style="margin-right: 8px">左边距</label>
                <van-stepper  style="margin-right: 16px" v-model="marginLeft" integer min="-300" max="300" />
                <label style="margin-right: 8px">右边距</label>
                <van-stepper v-model="marginRight" integer min="-300" max="300" />
            </template>
        </van-field>
    </div>
</template>


<script>
    export default {
        props : {

        },
        data(){
            return {
            }
        },
        computed:{
            center:{
                get() {
                    let style = this.$store.state.selectedComponent.data.style;
                    return style.marginLeft === 'auto' && style.marginRight === 'auto';
                },
                set(value){
                    if(value === false){
                        this.$store.state.selectedComponent.data.style.marginLeft = 0;
                        this.$store.state.selectedComponent.data.style.marginRight = 0;
                    }else{
                        this.$store.state.selectedComponent.data.style.marginLeft = 'auto';
                        this.$store.state.selectedComponent.data.style.marginRight = 'auto';
                    }
                }
            },
            marginTop : {
                get(){
                    return parseInt(this.$store.state.selectedComponent.data.style.marginTop)
                },
                set(value){
                    this.$store.state.selectedComponent.data.style.marginTop = value + 'px'
                }
            },
            marginRight : {
                get(){
                    return parseInt(this.$store.state.selectedComponent.data.style.marginRight)
                },
                set(value){
                    this.$store.state.selectedComponent.data.style.marginRight = value + 'px'
                }
            },
            marginLeft : {
                get(){
                    return parseInt(this.$store.state.selectedComponent.data.style.marginLeft)
                },
                set(value){
                    this.$store.state.selectedComponent.data.style.marginLeft = value + 'px'
                }
            },
            marginBottom : {
                get(){
                    return parseInt(this.$store.state.selectedComponent.data.style.marginBottom)
                },
                set(value){
                    this.$store.state.selectedComponent.data.style.marginBottom = value + 'px'
                }
            }
        }
    }
</script>